<template>
  <div>
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>统计报表</el-breadcrumb-item>
        <el-breadcrumb-item>订单返修率</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--筛选条件 start-->
    <div class="condition-wrap">
      <el-form label-width="150px">
        <!-- <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="工程师：">
              <el-select v-model="engineerId" placeholder="请选择" :clearable="true">
                <el-option v-for="item in enginnerlist" :label="item.name" :value="item.id" :key="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row> -->
      </el-form>
    </div>
    <!--图表 start-->
    <div class="gird-wrap">
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="18" :offset="3">
          <div class='option-wrap' style="margin-bottom: 10px;">
            <el-radio-group v-model="timeTab" @change=handleTimeChange>
              <el-radio-button label="月"></el-radio-button>
              <!-- <el-radio-button label="年"></el-radio-button> -->
            </el-radio-group>
          </div>
          <div class="echarts" id="OrderRepairRate"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil'
  import wxs from '../utils/WxsService'
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/chart/bar')

  export default {
    name: 'order-RepairRate',
    components: {
      echarts
    },
    data() {
      return {
        engineerId: null,
        enginnerlist: [],
        timeTab: '月',
        OrderRepairRateList: [],
        datalist: {
          OrderRepairRateXAxisList: [],
          OrderRepairRateYAxisList: []
        },
        legendData: []
      }
    },
    methods: {
      getEnginnerlistData() {},
      getData() {
        let vm = this;
        this.OrderRepairRateList = wxs.getRreworkNumber();
        if (this.OrderRepairRateList != null & this.OrderRepairRateList != "") {
          let follow = this.OrderRepairRateList;
          this.datalist.OrderRepairRateXAxisList.push(follow.datelist);
          this.datalist.OrderRepairRateYAxisList.push(follow.numberList);
        }
        let myChart = echarts.init(document.getElementById('OrderRepairRate'));
        myChart.setOption({
          title: {
            text: '工程师订单返修率',
          },
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ['line', 'bar']
              },
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: vm.datalist.OrderRepairRateXAxisList
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}%'
            }
          },
          series: [{
            type: 'bar',
            data: vm.datalist.OrderRepairRateYAxisList,
          }],
          color: ['#8cd5ed']
        });
        vm.datalist.OrderRepairRateXAxisList = new Array(0);
        vm.datalist.OrderRepairRateYAxisList = new Array(0);
      },
      handleTimeChange() {
        if (this.engineerId != null & this.engineerId != "") {
          this.getData();
        } else {
          r.message('请您选择工程师！', 'warning')
        }
      },
      handleSearch() {
        if (this.engineerId != null & this.engineerId != "") {
          this.getData();
        } else {
          r.message('请您选择工程师！', 'warning')
        }
      }
    },
    mounted() {
      this.getData();
    }
  }

</script>

<style scoped>
  .echarts {
    width: 100%;
    height: 450px;
  }

</style>
